// 什么是高阶函数

//以函数作为参数 传入函数当中 并且返回出来一个函数
// const fn1 = () =>{
//     console.log("fn1");
// }

// const fn = (name,age,fn1) =>{
//     console.log(name,age);
//     return fn1()
// }

// fn("张三",18,fn1)

// 什么是高阶组件 

// 以组件作为参数 传入组件当中 并且返回一个新的组件

import React, { Component } from 'react'

export class A extends Component {
    render() {
        return (
            <div>
                A
                <p>
                    x:{this.props.x}
                    y:{this.props.y}
                </p>
            </div>
        )
    }
}

export class B extends Component {
    render() {
        return (
            <div>
                B
                <button>
                    x:{this.props.x}
                    y:{this.props.y}
                </button>
            </div>
        )
    }
}

const HocResize = (Com) =>{
    return class HocProps extends Component {
        state= {
            x: document.documentElement.clientWidth,
            y: document.documentElement.clientHeight
        }
        
        setX_Y(){
            this.setState({
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            })
        }
    
        componentDidMount(){
            window.addEventListener("resize",this.setX_Y.bind(this))
        }
    
        componentWillUnmount(){
            window.addEventListener("resize",this.setX_Y.bind(this))
        }
       
        render() {
            return (
                <Com {...this.props} x={this.state.x} y={this.state.y}>
                    
                </Com>
            )
        }
    }
}

const HocA = HocResize(A)
const HocB = HocResize(B)

export class HocProps extends Component {
    render() {
        return (
            <div>
                <HocA/>
                <HocB/>
            </div>
        )
    }
}

export default HocProps




